<template>
    <div>
      <van-list  >
        <div v-for="(item, index) in list" :key="index">
          <van-card :thumb="gridImg.icon2">
            <template #desc>
              <div>
                <p class="confirm-order-list">{{item.title}}</p>
                <p class="confirm-order-list">{{item.specification}}</p>
                <p class="confirm-order-list">{{item.content}}</p>
              </div>
            </template>
          </van-card>
          <van-divider />
        </div>
        <div style="background: white">
          <p style="color:#101010;font-weight: 600">以下方式二选一：</p>
          <van-radio-group :value="radio" @change="onChange">
            <van-cell-group>
              <van-cell
                title="到店自提"
                clickable
                data-name="1"
                @click="onClick"
              >
                <van-radio slot="right-icon" name="1" />
              </van-cell>
              <van-cell
                title="上门服务"
                style="border: none"
                clickable
                data-name="2"
                @click="onClick"
              >
                <van-radio slot="right-icon" name="2" />
              </van-cell>
              <van-field
                style="width:95%;margin-left:5%;border: none"
                :style="{visibility:radio ==2?'visible':'hidden'}"
                placeholder="请输入服务地址"
                :border="true"
                @change="onChange"
              ></van-field>
            </van-cell-group>
          </van-radio-group>
          <p style="font-weight: 600;text-align: center;height: 40px;line-height: 40px">上门服务费用说明问题</p>


        </div>
      </van-list>
      <div style="margin: 16px;">
        <van-button round
                    block
                    type="info"
                    @click="addCardSubmit"
                    native-type="submit">
          提交
        </van-button>
      </div>
    </div>
</template>

<script>
    export default {
        name: "confirmOrder",
      data() {
          return {
            radio:"1",
            list: [
              {title:'雨刮器',specification:'适用于宝马6系',content:'¥10元'},
            ],
            gridImg: {
              icon1: require("../assets/img/icon (1).png"),
              icon2: require("../assets/img/icon (2).png"),
              icon3: require("../assets/img/icon (3).png"),
              icon4: require("../assets/img/icon(4).png")
            },
          }
      },
      methods: {
        onChange(event) {

            this.radio=event

        },

        onClick(event) {
          const { name } = event.currentTarget.dataset;

            this.radio=name

        },
        addCardSubmit() {
              this.$router.push('/carshoplist')
        },
      }
    }
</script>

<style scoped>
  .van-cell:not(:last-child)::after {
    border: none;
  }
  .van-cell:first-child::after {
    border-bottom: 1px solid #ebedf0
  }
  .confirm-order-list {
    margin: 5px 0px;
    font-weight: 600;
  }
</style>
